import { useState } from 'react';
import { Collapse, Modal, Button } from 'antd';
import StyleLayout from '../style-layout';
import StylePosition from '../style-position';
import Editor from '../editor';
import { CodeOutlined } from '@ant-design/icons';

import './index.less';

const { Panel } = Collapse;

export default function LayoutRight() {
    const [visible, setVisible] = useState(false);

    const onOk = (e) => {
        console.log(e);
        setVisible(false)
    }

    const onCancel = () => setVisible(false);

    return <div className='layout-right'>
        <Editor 
            visible={visible}
            onOk={onOk}
            onCancel={onCancel}
        />
        <div style={{ padding: 16 }}>
            <Button type="primary" onClick={() => setVisible(true)}>
                <CodeOutlined />展开代码编辑样式style
            </Button>
        </div>

        <Collapse ghost defaultActiveKey={['1']} expandIconPosition='right'>
            <Panel header="布局" key="1">
                <StyleLayout />
            </Panel>
            <Panel header="定位" key="2">
                <StylePosition />
            </Panel>
        </Collapse>
    </div>
}